<template>
<div class="player" ref="player" v-if="showPlayer">
  <div class="music-thumb" v-if="showPlayerThumb">
    <img :src="playList.length?playList[currentIndex].musicinfo.al.picUrl:''" alt @click="$global.goPage('/MusicDetail/'+playList[currentIndex].musicinfo.id)"/>
    <audio
      :src="playList.length?playList[currentIndex].url:''"
      autoplay
      ref="audio" @pause="musicPause" @playing="musicPlaying"  @ended="musicEnded()" @error="musicErr()">
    </audio>

  </div>
<div class="player-tab">
  <div @click="preMusic()">
    <img src="../../../assets/playmusic/prev.svg" alt />
  </div>
  <div @click="toggle()">
    <img src="../../../assets/playmusic/play.svg" alt v-show="!isPlay" />
    <img src="../../../assets/playmusic/pause.svg" alt v-show="isPlay" />
  </div>
  <div @click="nextMusic()">
    <img src="../../../assets/playmusic/next.svg" alt />
  </div>
</div>

  <div class="icon">
    <div @click="toggleSchema()">
      <a title="顺序播放" v-show="schemaIndex===0">
        <img src="../../../assets/playmusic/listxunhuan.svg" />
      </a>
      <a href="#" title="随机播放" v-show="schemaIndex===1">
        <img src="../../../assets/playmusic/suiji.svg" />
      </a>
      <a href="#" title="单曲循环" v-show="schemaIndex===2">
        <img src="../../../assets/playmusic/danqu.svg" />
      </a>
    </div>

    <el-popover placement="top" title="播放列表" width="500" trigger="click">
      <el-card v-for="(item,i) in playList" class="PlayerList" :key="i">
        <p><span class="tit">{{item.musicinfo.name}}</span>---{{item.musicinfo.ar[0].name}}</p>
      </el-card>
      <div slot="reference">
        <a title="歌单"><img src="../../../assets/playmusic/bofangList.svg" /></a>
      </div>
    </el-popover>

  </div>
<!--<music-detail v-show="showDetail" :music="playList[currentIndex]?playList[currentIndex]:''" @hide="hide"></music-detail>-->
</div>
</template>

<script>
import {mapState} from "vuex";
import MusicDetail from "./MusicDetail";

export default {
name: "player",
  components: {MusicDetail},
  data(){
  return{
    isPlay:false,
showDetail:false
  }
  },
  props:{
    showPlayer:{default:false},
    showPlayerThumb:{default: true}
  },

  computed:{
    ...mapState({
      playList:state=>state.audioMusic.PlayerList,
      currentIndex:state=>state.audioMusic.currentIndex,
      schemaIndex:state=>state.audioMusic.schemaIndex
    })
  },
  methods:{
  show(){
    this.showDetail=true
  },
    hide(){
    this.showDetail=false
    },
  toggle(){
this.isPlay=!this.isPlay
    if (this.isPlay)
      this.$refs.audio.play();
    else {
      this.$refs.audio.pause();
    }
  },
    musicPlaying() {
      this.isPlay = true;
      if (this.$refs.player != null) this.$refs.player.isPlay = true;
    },
    musicPause() {
      this.isPlay = false;
      if (this.$refs.player != null) this.$refs.player.isPlay = false;
    },
    nextMusic() {
    this.$store.dispatch('audioMusic/MusicNext')
      this.$refs.audio.src = this.playList[this.currentIndex].url;
    },
    preMusic() {
      this.$store.dispatch('audioMusic/MusicPrev')
      this.$refs.audio.src = this.playList[this.currentIndex].url;
    },
    toggleSchema(){
      this.$store.dispatch('audioMusic/Schema')
    },
    musicEnded() {
      switch (this.schemaIndex) {
        case 0:
          this.currentIndex >= this.playList.length - 1 ?0:this.currentIndex++;
          break;
        case 1:
          this.currentIndex = Math.floor(Math.random() * this.playList.length);
          break;
        case 3:
          break;
      }
    },
    musicErr() {
      console.log("err");
      this.$message.error("当前音频不可用");
      this.currentIndex++;
    },

  }
}
</script>

<style lang="less">
.player{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: white;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  padding: 0 20px;
  .music-thumb{
    width: 70px;
    height: 70px;
    background: #cccccc;
    img{
      width: 70px;
      height: 70px;
    }
  }
  .player-tab{
    margin: 0 20px;
    display: flex;
    div{
margin: 0 10px;
    }
  }
  .icon{
    position: absolute;
    right: 80px;
    display: flex;
    div{
      margin: 0 20px;
      display: flex;
      align-items: center;
    }
  }
}
.PlayerList{
padding: 0;
}
.tit{
  font-weight: bold;
}
</style>
